<template>
  <div class="center-bottom panel">
    <header />
    <main class="mian">
      <Carousel v-model="list" />
    </main>
  </div>
</template>

<script>
import { ref, onMounted, watch} from 'vue'
import Carousel from './Carousel.vue'

import { getMachine } from '@/api/statistics'
import { list } from 'postcss'
export default {
  name: 'ResourceMonitor',
  components: { Carousel },
  props: {
    code: { //地图code
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    }
  },
  setup(props) {
    const list = ref([])
    const getData = async() => {
      const res = await getMachine({areaCode: props.code })
      if (res.status === 200) {
        list.value = res.data
        list.value.map(item => {
          
          item.diskUsage = item.diskTotal ?(item.diskTotal  == 0? 0:((item.diskTotal - item.diskFree) / item.diskTotal).toFixed(2)): 0
          item.memoryUsage = item.memoryTotal ?item.memoryTotal  == 0? 0:(item.memoryUsed / item.memoryTotal).toFixed(2):0
          item.diskWidth = Math.round(item.diskUsage * 10)*10
          item.memoryWidth = Math.round(item.memoryUsage * 10)*10
          item.cpuWidth = Math.round(item.cpuUsage * 10)*10
        })
      }
    }
    watch(() => props.refresh, () => {
      getData()
    });
    watch(() => props.code, () => {
      getData()
    });
    onMounted(() => {
      // getData()
    })
    return {
      list
    }
  }
}
</script>


<style lang="scss" scoped>
@import '../style.scss';

.center-bottom {
  height: 100%;
  background: rgba(0, 14, 32, 0.8);
  background-image: none !important;

  main {

    width: 100%;
    height: calc(100% - 74px) !important;
    padding-bottom: 10px;

  }



}

header {
  height: 54px;
  background-image: url(@/assets/screenboard/center-panel-title.png);
  background-repeat: no-repeat;
  background-size: contain;
}
</style>